<template>
  <div class="v-diagram-header-wrap">
    <div class="v-diagram-header-content">
      <div class="v-label">图头显示方式选择:</div>
      <div class="v-radio-wrap">
        <el-radio-group
          v-model="diagramHeaderModel.titleConfig.type"
          :disabled="diagramCustomizationManagementModel.isModelDisabled"
          @change="handleShowMethodChange($event as DiagramTitleType)"
        >
          <el-radio :label="DiagramTitleType.Common">{{ $t("现有规范") }}</el-radio>
          <el-radio :label="DiagramTitleType.Name">{{ $t("视图名称") }}</el-radio>
          <!--  <el-radio :label="DiagramHeaderShowMethod.CustomMethod">{{$t('自定义')}}</el-radio> -->
        </el-radio-group>
      </div>
      <div class="v-checkbox-wrap">
        <el-checkbox
          v-model="diagramHeaderModel.titleConfig.showDiagramType"
          label="显示图类型"
          size="small"
          :disabled="diagramHeaderModel.titleConfig.type === DiagramTitleType.Common"
        ></el-checkbox>
      </div>
    </div>

    <!-- <div class="custom-warp">
      <custom-show-header :diagramHeaderModel="diagramHeaderModel">
      </custom-show-header>
    </div> -->
  </div>
</template>

<!-- diagramCustomizationManagementModel.configurationDisabled ||  -->

<script lang="ts" setup>
import { reactive } from "vue";
import { DiagramTitleType, DiagramHeaderModel } from "./diagramHeaderComps/DiagramHeaderModel";
import { DiagramCustomizationManagementModel } from "../DiagramCustomizationManagementModel";

const props = defineProps<{
  diagramCustomizationManagementModel: DiagramCustomizationManagementModel;
}>();
const diagramHeaderModel: DiagramHeaderModel = reactive(props.diagramCustomizationManagementModel.diagramHeaderModel);

const handleShowMethodChange = (val: DiagramTitleType) => {
  diagramHeaderModel.changeShowMethod(val);
};
</script>
<style lang="scss">
.v-diagram-header-wrap {
  padding: 16px;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .v-diagram-header-content {
    display: flex;
    align-items: center;
    height: 38px;
    border: 1px solid #e4e4e4;
    padding: 0 8px;

    .v-label {
      flex: 0 0 auto;
      margin-right: 16px;
      color: rgba(0, 0, 0, 0.65);
    }
    .v-radio-wrap {
      flex: 1;
    }
  }
}
</style>
